import React, { useEffect } from 'react'
import styles from './index.module.less'
import Store from '../store'
import { observer, useLocalObservable } from 'mobx-react'
import PageLoading from '@/components/Global/PageLoading'
import BtnBotLayout from '@/components/BtnBotLayout'
import { sortNum } from '../const'
import { history, useParams } from 'umi'

function Exam() {
    const store = useLocalObservable(() => Store)
    const { lot_arr } = store
    const { id } = useParams()

    useEffect(() => {
        document.title = '拍卖表'
    }, [])

    if (!lot_arr?.length) {
        return <PageLoading />
    }
    console.log(lot_arr)
    return (
        <div className={styles.layout_container}>
            <BtnBotLayout
                footer={
                    <div
                        className={styles.save_btn}
                        onClick={() => {
                            history.replace(`/auction/${id}`)
                        }}
                    >
                        更新拍卖表
                    </div>
                }
            >
                <div className={styles.container}>
                    <div className={styles.wrapper}>
                        <div className={styles.explain}>请各位学员自行评估自己对职业价值的判断：</div>
                        {lot_arr?.map((item: any, idx: number) => {
                            return (
                                <div key={item.id} className={styles.ques_wrapper}>
                                    <div className={styles.ques_title}>
                                        价值观商品{sortNum.split('')[item?.sort]}：{item?.describe}
                                    </div>
                                    <div className={styles.budget_money}>预算金额：{item?.value || 0}万</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </BtnBotLayout>
        </div>
    )
}

export default observer(Exam)
